<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
   <div class="linkage">
  <div>
   <el-select v-model="province" filterable size="small" @click="getList()"  @change="selectProvinceFun($event)" placeholder="请选择省份">
    <el-option value="" label="请选择省份"></el-option>
      <el-option
      v-for="item in provinceList"
      :value="item.areaCode"
      :label="item.name"
      :key="item.areaCode"/>
   </el-select>
  </div>
  <div>
   <el-select v-model="selectCity" filterable size="small" @change="selectCityFun($event)" placeholder="请选择城市">
    <el-option value="" label="请选择城市"></el-option>
    <el-option v-for="item in cityList"
      :value="item.areaCode"
      :label="item.name"
      :key="item.areaCode"/>
   </el-select>
  </div>
  <div>
   <el-select v-model="selectArea" filterable size="small" placeholder="请选择区县">
    <el-option value="" label="请选择区县"></el-option>
    <el-option v-for="item in areaList"
      :value="item.areaCode"
      :label="item.name"
      :key="item.areaCode"/>
   </el-select>
  </div>

  <el-row>
        <el-col :span="8"
                style='margin-top:15px;'>
          <el-tree class="filter-tree"
                   :data="treeData"
                   node-key="id"
                   highlight-current
                   :props="defaultProps"
                   :filter-node-method="filterNode"
                   @node-click="getNodeData"
                   default-expand-all>
          </el-tree>
        </el-col>
        <el-col :span="16"
                style='margin-top:15px;'>
          <el-card class="box-card">
            <!-- <el-form :label-position="labelPosition"
                     label-width="80px"
                     :rules="rules"
                     :model="form"
                     ref="form">
              <el-form-item label="父级节点"
                            prop="parentId">
                <el-input v-model="form.parentId"
                          :disabled="formEdit"
                          placeholder="请输入父级节点"></el-input>
              </el-form-item>
              <el-form-item label="节点编号"
                            prop="deptId"
                            v-if="formEdit">
                <el-input v-model="form.deptId"
                          :disabled="formEdit"
                          placeholder="节点编号"></el-input>
              </el-form-item>
              <el-form-item label="部门名称"
                            prop="name">
                <el-input v-model="form.name"
                          :disabled="formEdit"
                          placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item label="排序"
                            prop="orderNum">
                <el-input type="number"
                          v-model="form.sort"
                          :disabled="formEdit"
                          placeholder="请输入排序"></el-input>
              </el-form-item>
              <el-form-item v-if="formStatus == 'update'">
                <el-button type="primary"
                           @click="update">更新
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
              <el-form-item v-if="formStatus == 'create'">
                <el-button type="primary"
                           @click="create">保存
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
            </el-form> -->
          </el-card>
        </el-col>
      </el-row>
 </div>
</template>

<script>
import {fetchList, getObjByCode,getObj,fetchTree} from '@/api/area'
import {tableOption} from '@/const/crud/area'
import {mapGetters} from 'vuex'


export default {
 name: 'linkage',
 data () {
  return {
    treeData: [],
    defaultProps: {
      children: 'children',
      label: 'name'
    },
    listQuery: {
      name: undefined
    },
    provinceList: [],
     // 被选中的市数据
    cityList: [],
     // 被选中的县数据
    areaList: [],
    province:{} ,
    selectProvince: {},
    selectCity: {},
    selectArea: {}
  }
 },
 created(){
   this.getList();
 },
 mounted () {
 },
 methods: {
  getList() {
      fetchList().then(response => {
          this.provinceList = response.data.data
      })
      fetchTree().then(response =>{
        this.treeData = response.data.data

      })
  },
  // 省份 市 县联动
  selectProvinceFun (event) {
   if(!event){
      this.getList();
   }else{
      getObjByCode(event).then(res =>{
          this.cityList = res.data.data
          this.selectCity = ''
          this.selectArea = ''
      })
   }
   console.log(province)
  },
  selectCityFun (event) {

   getObjByCode(event).then(res =>{
      this.areaList = res.data.data
      this.selectArea = ''
   })
  },
  filterNode(value, data) {
    if (!value) return true
    return data.label.indexOf(value) !== -1
  },
  getNodeData(data) {
    if (!this.formEdit) {
      this.formStatus = 'update'
    }
    getObj(data.id).then(response => {
      this.form = response.data.data
    })
    this.currentId = data.id
    this.showElement = true
  },
 }
}
</script>
<style lang="scss" scoped>
    .linkage {
    display: flex;
          div {
        margin-right: 5px;
    }
}
</style>
